<template>
  <div>
    <div class="box">
      <div class="search">
        <input type="text" v-model="searchText" />
        <button >搜索</button>
      </div>
      <div class="list">
        <tr>
          <th>商品名</th>
          <th>
            单价
            <span @click="Sort('price', false)">↑</span>
            <span @click="Sort('price', true)">↓</span>
          </th>
          <th>
            销量
            <span @click="Sort('sales', false)">↑</span>
            <span @click="Sort('sales', true)">↓</span>
          </th>
        </tr>
        <tr v-for="(item, index) in list" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
          <td>{{ item.sales }}万</td>
        </tr>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      goodsList: [
        { name: "三星Galaxy Note8", price: 5200, sales: 2.6 },
        { name: "iphone5s", price: 2500, sales: 2.2 },
        { name: "iphone6", price: 2800, sales: 1.6 },
        { name: "iphone6s", price: 3200, sales: 2.9 },
        { name: "iphone7", price: 3800, sales: 12.6 },
        { name: "iphone7plus", price: 4200, sales: 2.1 },
        { name: "iphone8", price: 5500, sales: 10.6 },
        { name: "华为", price: 4600, sales: 7.6 },
        { name: "小米", price: 1200, sales: 32.6 },
        { name: "OPPOR11", price: 2500, sales: 1.2 },
        { name: "vivoX20", price: 3250, sales: 2.9 },
        { name: "OPPOR11s", price: 3000, sales: 2.1 },
      ],
      searchText: "",
      letter: "",
      flag: false,
    };
  },
  methods: {
    Sort(letter, flag) {
      this.letter = letter;
      this.flag = flag;
    },
 
  },
  computed: {
    list:function() {
      var that = this;
      var arr = [];
      for (var i = 0; i < this.goodsList.length; i++) {
        if (this.goodsList[i].name.search(this.searchText) != -1) {
          arr.push(this.goodsList[i]);
        }
      }
      if (this.letter != "") {
        arr.sort((a, b) => {
          if (that.flag) {
            return b[that.letter] - a[that.letter];
          } else {
            return a[that.letter] - b[that.letter];
          }
        });
      }
      return arr;
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  width: 500px;
  border: 1px solid #666;
  margin: 50px auto;
  .search {
    width: 70%;
    height: 80px;
    margin: auto;
    // background-color: aquamarine;
    display: flex;
    align-items: center;
    justify-content: space-around;
    input {
      width: 200px;
      height: 40px;
    }
    button {
      width: 80px;
      height: 40px;
    }
  }
  .list {
    width: 95%;
    margin: 8px auto;
    span {
      background: #ff9900;
      padding: 0 6px;
      color: #fff;
      cursor: pointer;
      margin: 10px;
    }
  }
  .list tr td,
  .list tr th {
    width: 33%;
    border: 1px solid #ccc;
    padding: 5px 10px;
    text-align: left;
  }
}
</style>